
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <style>
        .preview-suitable-app {
            overflow: visible;
            height: calc(100% - 20px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .app-border {
            transform-origin: center;
            position: relative;
            border-radius: 30px 30px 30px 30px;
        }
        .app-border::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border: 4px solid rgb(51, 51, 51);
            border-radius: 30px 30px 30px 30px;
        }
        iframe {
            transform-origin: left top;
            border-radius: 26px;
            overflow: hidden;
        }
        .app-border-right {
            position: absolute;
            top: 259px;
            right: -15px;
        }
        .app-border-footer {
            width: 395px;
            height: 38px;
            position: absolute;
            bottom: 8px;
            left: -1px;
            border-radius: 0 0 16px 16px;
        }
        ::-webkit-scrollbar {
            width: 0px;
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="preview-suitable-content-app" class="preview-suitable-app">
        <div class="app-border" style="width: 393px;height: 852px;transform:scale(0.9002347417840375);">
            <iframe id="iframe" class="vueIframeApp" style="border:none;width: 100%;height: 100%;"></iframe>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const html = "<html lang=\"zh-CN\">\n <head>\n  <meta charset=\"utf-8\"/>\n  <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"/>\n  <title>\n   忘记密码 - 智能问答\n  </title>\n  <script src=\"https://res.gemcoder.com/js/reload.js\">\n  <\/script>\n  <script src=\"https://cdn.tailwindcss.com\">\n  <\/script>\n  <link href=\"https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css\" rel=\"stylesheet\"/>\n  <script>\n   tailwind.config = {\n  theme: {\n    extend: {\n      colors: {\n        primary: '#6C63FF',\n        secondary: '#9D50BB',\n        accent: '#56CCF2',\n        success: '#28C76F',\n        danger: '#EA5455',\n        warning: '#FF9F43',\n        info: '#00CFE8',\n        dark: '#1E293B',\n        light: '#F8FAFC'\n      },\n      fontFamily: {\n        sans: ['Inter', 'system-ui', 'sans-serif']\n      }\n    }\n  }\n};\n  <\/script>\n  <style type=\"text/tailwindcss\">\n   @layer utilities {\n            .content-auto {\n                content-visibility: auto;\n            }\n            .gradient-primary {\n                background: linear-gradient(135deg, #6C63FF 0%, #9D50BB 100%);\n            }\n            .input-focus {\n                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;\n            }\n            .btn-hover {\n                @apply hover:shadow-lg hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-0.5;\n            }\n        }\n  </style>\n \n        <style>\n            ::-webkit-scrollbar { width: 0px; }\n        </style>\n    </head>\n <body class=\"bg-gray-50 min-h-screen flex flex-col\">\n  <!-- 顶部返回栏 -->\n  <header class=\"bg-white shadow-sm py-4 px-6\">\n   <div class=\"flex items-center\">\n    <a class=\"text-gray-700 mr-4\" href=\"javascript:void(0);\">\n     <i class=\"fas fa-arrow-left text-xl\">\n     </i>\n    </a>\n    <h1 class=\"text-xl font-semibold text-gray-800\">\n     忘记密码\n    </h1>\n   </div>\n  </header>\n  <!-- 主内容区 -->\n  <main class=\"flex-grow flex items-center justify-center p-6\">\n   <div class=\"w-full max-w-md bg-white rounded-2xl shadow-md p-8 transform transition-all duration-500 hover:shadow-lg\" data-ytextravalue=\"extra-m9c2pydtn\">\n    <!-- 标题和说明 -->\n    <div class=\"text-center mb-6 mt-[-20px]\" data-ytindex=\"0\" data-ytoriginindex=\"0\" data-ytparentvalue=\"extra-m9c2pydtn\">\n     <div class=\"w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-2\">\n      <i class=\"fas fa-lock text-primary text-2xl\">\n      </i>\n     </div>\n     <h2 class=\"text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800 mb-2\">\n      找回您的密码\n     </h2>\n     <p class=\"text-gray-500\" data-yteditvalue=\"请输入您的邮箱，我们将发送验证码帮助您重置密码\">\n      请输入您的邮箱，我们将发送验证码帮助您重置密码\n     </p>\n    </div>\n    <!-- 表单区域 -->\n    <form class=\"space-y-6\" data-ytindex=\"1\" data-ytoriginindex=\"1\" id=\"forgotPasswordForm\">\n     <!-- 手机号/邮箱输入框 -->\n     <div class=\"space-y-2\">\n<label class=\"block text-sm font-medium text-gray-700\" for=\"account\">\n       邮箱\n      </label>\n      <div class=\"relative\">\n       <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n<i class=\"fas fa-envelope text-gray-400\">\n        </i>\n       </div>\n<input class=\"w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus outline-none\" id=\"account\" name=\"account\" placeholder=\"请输入邮箱\" required=\"\" type=\"email\"/>\n      </div>\n     </div>\n     <!-- 验证码输入框 -->\n     <div class=\"space-y-2\">\n      <label class=\"block text-sm font-medium text-gray-700\" for=\"verificationCode\">\n       验证码\n      </label>\n      <div class=\"flex space-x-3\">\n       <div class=\"relative flex-grow\">\n        <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n         <i class=\"fas fa-shield-alt text-gray-400\">\n         </i>\n        </div>\n        <input class=\"w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus outline-none\" id=\"verificationCode\" name=\"verificationCode\" placeholder=\"请输入验证码\" required=\"\" type=\"text\"/>\n       </div>\n       <button class=\"px-4 py-3 bg-gray-100 text-gray-700 rounded-lg font-medium text-sm btn-hover whitespace-nowrap\" id=\"sendCodeBtn\" type=\"button\">\n        获取验证码\n       </button>\n      </div>\n     </div>\n     <!-- 新密码输入框 -->\n     <div class=\"space-y-2\">\n      <label class=\"block text-sm font-medium text-gray-700\" for=\"newPassword\">\n       设置新密码\n      </label>\n      <div class=\"relative\">\n       <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n        <i class=\"fas fa-key text-gray-400\">\n        </i>\n       </div>\n       <input class=\"w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus outline-none\" id=\"newPassword\" name=\"newPassword\" placeholder=\"请设置新密码\" required=\"\" type=\"password\"/>\n       <button class=\"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400\" id=\"togglePassword\" type=\"button\">\n        <i class=\"fas fa-eye-slash\">\n        </i>\n       </button>\n      </div>\n     </div>\n     <!-- 确认新密码输入框 -->\n     <div class=\"space-y-2\">\n      <label class=\"block text-sm font-medium text-gray-700\" for=\"confirmPassword\">\n       确认新密码\n      </label>\n      <div class=\"relative\">\n       <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n        <i class=\"fas fa-key text-gray-400\">\n        </i>\n       </div>\n       <input class=\"w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus outline-none\" id=\"confirmPassword\" name=\"confirmPassword\" placeholder=\"请再次输入新密码\" required=\"\" type=\"password\"/>\n       <button class=\"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400\" id=\"toggleConfirmPassword\" type=\"button\">\n        <i class=\"fas fa-eye-slash\">\n        </i>\n       </button>\n      </div>\n     </div>\n     <!-- 提交按钮 -->\n     <button class=\"w-full py-4 rounded-xl gradient-primary text-white font-semibold text-lg btn-hover focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2\" type=\"submit\">\n      重置密码\n     </button>\n    </form>\n    <!-- 底部提示 -->\n    <div class=\"mt-8 text-center\" data-ytindex=\"2\" data-ytoriginindex=\"2\">\n     <p class=\"text-gray-500\">\n      记得密码了？\n      <a class=\"text-primary font-medium hover:underline\" href=\"javascript:void(0);\">\n       立即登录\n      </a>\n     </p>\n    </div>\n   </div>\n  </main>\n  <!-- 页脚 -->\n  <footer class=\"py-6 px-6 text-center text-gray-400 text-sm\">\n   <p>\n    © 2023 智能问答. 保留所有权利\n   </p>\n  </footer>\n  <!-- 成功提示弹窗 -->\n  <div class=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden\" id=\"successModal\">\n   <div class=\"bg-white rounded-xl p-8 max-w-md w-full mx-6 transform transition-all duration-300 scale-95 opacity-0\" id=\"modalContent\">\n    <div class=\"text-center\">\n     <div class=\"w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-4\">\n      <i class=\"fas fa-check text-success text-2xl\">\n      </i>\n     </div>\n     <h3 class=\"text-xl font-bold text-gray-800 mb-2\">\n      密码重置成功\n     </h3>\n     <p class=\"text-gray-500 mb-6\">\n      您的密码已成功重置，请使用新密码登录\n     </p>\n     <button class=\"w-full py-3 rounded-lg gradient-primary text-white font-medium btn-hover\" id=\"closeModal\">\n      去登录\n     </button>\n    </div>\n   </div>\n  </div>\n  <script>\n   // 页面加载时初始化\ndocument.addEventListener('DOMContentLoaded', function () {\n  // 获取DOM元素\n  var sendCodeBtn = document.getElementById('sendCodeBtn');\n  var togglePassword = document.getElementById('togglePassword');\n  var toggleConfirmPassword = document.getElementById('toggleConfirmPassword');\n  var newPassword = document.getElementById('newPassword');\n  var confirmPassword = document.getElementById('confirmPassword');\n  var forgotPasswordForm = document.getElementById('forgotPasswordForm');\n  var successModal = document.getElementById('successModal');\n  var modalContent = document.getElementById('modalContent');\n  var closeModal = document.getElementById('closeModal');\n  // 验证码倒计时功能\n  var countdown = 60;\n  var countdownTimer = null;\n  sendCodeBtn.addEventListener('click', function () {\n    var accountInput = document.getElementById('account');\n    var account = accountInput.value.trim();\n    if (!account) {\n      showToast('请输入手机号或邮箱');\n      accountInput.focus();\n      return;\n    }\n\n    // 简单验证手机号或邮箱格式\nvar isEmail = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(account);\n    if (!isEmail) {\nshowToast('请输入正确的邮箱地址');\n      accountInput.focus();\n      return;\n    }\n\n    // 模拟发送验证码\n    sendCodeBtn.disabled = true;\n    sendCodeBtn.classList.remove('bg-gray-100', 'text-gray-700');\n    sendCodeBtn.classList.add('bg-gray-300', 'text-gray-500');\n    sendCodeBtn.textContent = \"\\u91CD\\u65B0\\u53D1\\u9001(\".concat(countdown, \"s)\");\n    countdownTimer = setInterval(function () {\n      countdown--;\n      sendCodeBtn.textContent = \"\\u91CD\\u65B0\\u53D1\\u9001(\".concat(countdown, \"s)\");\n      if (countdown <= 0) {\n        clearInterval(countdownTimer);\n        sendCodeBtn.disabled = false;\n        sendCodeBtn.classList.remove('bg-gray-300', 'text-gray-500');\n        sendCodeBtn.classList.add('bg-gray-100', 'text-gray-700');\n        sendCodeBtn.textContent = '获取验证码';\n        countdown = 60;\n      }\n    }, 1000);\n    showToast('验证码已发送，请查收');\n  });\n  // 密码显示/隐藏切换\n  togglePassword.addEventListener('click', function () {\n    var type = newPassword.getAttribute('type') === 'password' ? 'text' : 'password';\n    newPassword.setAttribute('type', type);\n    togglePassword.innerHTML = type === 'password' ? \"<i class=\\\"fas fa-eye-slash\\\" data-ytId=\\\"id-p2lor\\\" data-ytId=\\\"id-4n2mb\\\" data-ytId=\\\"id-gcy0k\\\"></i>\" : \"<i class=\\\"fas fa-eye\\\" data-ytId=\\\"id-5ap3n\\\" data-ytId=\\\"id-c74hl\\\" data-ytId=\\\"id-qvgil\\\"></i>\";\n  });\n  toggleConfirmPassword.addEventListener('click', function () {\n    var type = confirmPassword.getAttribute('type') === 'password' ? 'text' : 'password';\n    confirmPassword.setAttribute('type', type);\n    toggleConfirmPassword.innerHTML = type === 'password' ? \"<i class=\\\"fas fa-eye-slash\\\" data-ytId=\\\"id-4oz8j\\\" data-ytId=\\\"id-06420\\\" data-ytId=\\\"id-wc62q\\\"></i>\" : \"<i class=\\\"fas fa-eye\\\" data-ytId=\\\"id-grx0p\\\" data-ytId=\\\"id-a27q9\\\" data-ytId=\\\"id-uoixf\\\"></i>\";\n  });\n  // 表单提交处理\n  forgotPasswordForm.addEventListener('submit', function (e) {\n    e.preventDefault();\n    var account = document.getElementById('account').value.trim();\n    var verificationCode = document.getElementById('verificationCode').value.trim();\n    var password = newPassword.value.trim();\n    var confirmPwd = confirmPassword.value.trim();\n\n    // 表单验证\n    if (!account) {\n      showToast('请输入手机号或邮箱');\n      return;\n    }\n    if (!verificationCode) {\n      showToast('请输入验证码');\n      return;\n    }\n    if (!password) {\n      showToast('请设置新密码');\n      return;\n    }\n    if (password.length < 6) {\n      showToast('密码长度不能少于6位');\n      return;\n    }\n    if (password !== confirmPwd) {\n      showToast('两次输入的密码不一致');\n      return;\n    }\n\n    // 模拟表单提交\n    setTimeout(function () {\n      // 显示成功弹窗\n      successModal.classList.remove('hidden');\n      setTimeout(function () {\n        modalContent.classList.remove('scale-95', 'opacity-0');\n        modalContent.classList.add('scale-100', 'opacity-100');\n      }, 10);\n    }, 1000);\n  });\n  // 关闭弹窗\n  closeModal.addEventListener('click', function () {\n    modalContent.classList.remove('scale-100', 'opacity-100');\n    modalContent.classList.add('scale-95', 'opacity-0');\n    setTimeout(function () {\n      successModal.classList.add('hidden');\n      // 这里可以添加跳转到登录页的逻辑\n    }, 300);\n  });\n  // 点击弹窗外部关闭\n  successModal.addEventListener('click', function (e) {\n    if (e.target === successModal) {\n      closeModal.click();\n    }\n  });\n  // Toast提示功能\n  function showToast(message) {\n    // 检查是否已有toast\n    var toast = document.querySelector('.toast-notification');\n    if (toast) {\n      toast.remove();\n    }\n\n    // 创建新toast\n    toast = document.createElement('div');\n    toast.className = 'toast-notification fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-full shadow-lg z-50 opacity-0 transition-opacity duration-300 flex items-center';\n    toast.innerHTML = \"\\n                    <i class=\\\"fas fa-exclamation-circle mr-2\\\" data-ytId=\\\"id-z9lt8\\\" data-ytId=\\\"id-34mpp\\\" data-ytId=\\\"id-0z1yh\\\"></i>\\n                    <span>\".concat(message, \"</span>\\n                \");\n    document.body.appendChild(toast);\n\n    // 显示toast\n    setTimeout(function () {\n      toast.classList.remove('opacity-0');\n      toast.classList.add('opacity-100');\n    }, 10);\n\n    // 3秒后隐藏toast\n    setTimeout(function () {\n      toast.classList.remove('opacity-100');\n      toast.classList.add('opacity-0');\n      setTimeout(function () {\n        toast.remove();\n      }, 300);\n    }, 3000);\n  }\n});\n  <\/script>\n </body>\n</html>\n";
        iframe.srcdoc = html;
    });
</script>
</html>
